<template>
	<view class="search_container"><uni-search-bar @input="input" :radius="30" cancelButton="none" placeholder="请输入搜索内容"></uni-search-bar></view>
	<view class="search_list" v-if="searchData.goods.length">
		<view class="search_list__item" v-for="item in searchData.goods" :key="item.cat_id" @click="handleNavToGoodsDetail(item.cat_id)">
			<view class="search_list__item--name">{{ item.goods_name }}</view>
			<uni-icons type="forward" size="20" @click="handleDelHistoryClick"></uni-icons>
		</view>
	</view>
	<!-- 搜索历史 s -->
	<view class="history" v-else>
		<view class="history_top">
			<text class="history_top--text">搜索历史</text>
			<uni-icons type="trash-filled" size="20"></uni-icons>
		</view>
		<view class="history_list"><uni-tag :text="item" v-for="item in history" :key="item" @click="handleHistorySearch(item)"></uni-tag></view>
	</view>
	<!-- 搜索历史 e -->
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

interface SearchData {
	total: number;
	pagenum: number;
	goods: {
		goods_id: string;
		cat_id: string;
		goods_name: string;
		goods_price: number;
		goods_number: number;
		goods_weight: number;
		goods_big_logo: string;
		goods_small_logo: string;
		add_time: number;
		upd_time: number;
		hot_mumber: number;
		is_promote: boolean;
		cat_one_id: number;
		cat_two_id: number;
		cat_three_id: number;
	}[];
}
//TODO:定时器类型未补全
const pageData = reactive<{ time: NodeJS.Timer | null; keyword: string; searchData: SearchData; history: string[] }>({
	time: null,
	keyword: '',
	searchData: { total: 0, pagenum: 1, goods: [] },
	history: []
});
const { time, keyword, searchData, history } = toRefs(pageData);
const input = (e: string) => {
	// 防抖
	time.value && clearTimeout(time.value);
	time.value = setTimeout(() => {
		keyword.value = e;
		initSearch();
	}, 500);
};
onLoad(() => {
	history.value = JSON.parse(uni.getStorageSync('kw') || '[]');
});
async function initSearch() {
	if (keyword.value === '') {
		searchData.value.goods = [];
		return;
	}
	const {
		data: { meta, message }
	} = await uni.$http.get('api/public/v1/goods/search', { query: keyword.value });
	if (meta.status !== 200) {
		uni.$showMsg();
		return;
	}
	searchData.value = message;
	saveSearchHistory();
}
function saveSearchHistory() {
	history.value = Array.from(new Set([keyword.value, ...history.value]));
	uni.setStorageSync('kw', JSON.stringify(history.value));
}
const handleDelHistoryClick = () => {
	history.value = [];
	uni.setStorageSync('kw', '[]');
};
const handleNavToGoodsDetail = (id: string) => {
	uni.navigateTo({
		url: '/subPak/goods_detail/goods_detail?id=' + id
	});
};
const handleHistorySearch = (kw: string) => {
	uni.navigateTo({
		url: '/subPak/goods_list/goods_list?query=' + kw
	});
};
</script>

<style lang="scss">
.search_container {
	position: sticky;
	top: 0;
	z-index: 999;
}
.search_list {
	.search_list__item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		padding-left: 10rpx;
		border: 1px solid #ccc;
		.search_list__item--name {
			font-size: 12px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}
.history {
	.history_top {
		padding: 0 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;
		border-bottom: 1px solid #ccc;
		.history_top--text {
			font-size: 16px;
		}
	}
	.history_list {
		display: flex;
		flex-wrap: wrap;
		uni-tag {
			margin: 5px;
		}
	}
}
</style>
